<template>

	<div class="innerpage headspace">
		<Header active="1"></Header>
		<div class="bread">
			<div class="page-inner">
			    <NuxtLink to="/">Home</NuxtLink>><NuxtLink to="/Manufacturers">Database</NuxtLink>><NuxtLink to="/APIs">Active Pharmaceutical
			        Ingredient (API)</NuxtLink>><NuxtLink to="/APIs">Paracetamol (Oral)</NuxtLink>><span>Toxicity Data</span>
			</div>
			
		</div>
		<div class="detailBox" id="p1">
			<div class="box flex page-inner">
				<div class="col">
					<div class="mliks">
						<div class="mt f24 font-m">Non-clinical Toxicity Data </div>
						<div class="items">
							<div class="i"><a href="#p1">Acute toxicity studies</a></div>
							<div class="i"><a href="#p2">Repeated dose toxicity studies</a></div>
							<div class="i"><a href="#p3">Carcinogenicity studies</a></div>
							<div class="i"><a href="#p4">In-vivo/In-vitro genotoxicity studies</a></div>
							<div class="i"><a href="#p5">Reproductive and developmental studies</a></div>
							<div class="i"><a href="#p6">Highly sensitizing potential </a></div>
						</div>
						<div class="mt f24 font-m">Clinical Toxicity Data</div>
						<div class="items">
							<div class="i"><a href="#p7">Pharmacodynamics data</a></div>
							<div class="i"><a href="#p8">Carcinogenicity </a></div>
							<div class="i"><a href="#p9">Reproductive and developmental studies </a></div>
							<div class="i"><a href="#p10">Highly sensitizing potential </a></div>
						</div>
					</div>
				</div>
				<div class="cor">
					<div class="dt f36 font-m">Non-clinical Toxicity Data</div>
					<div class="dblock">
						<div id="p1" class="pos"></div>
						<div class="bt f24 font-m">Acute toxicity studies</div>
						<div class="btxt f16">
							<table>
								<tbody>
									<tr>
										<th class="f18 font-m">Species</th>
										<th class="f18 font-m">Route</th>
										<th class="f18 font-m">LD50 value (mg/kg)</th>
									</tr>
									<tr v-for="(item,index) in dataInfo.acute_toxicity_studies" :key="index">
										<td>{{item.species}}</td>
										<td>{{item.route}}</td>
										<td>{{item.ld50_value}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="dblock">
						<div id="p2" class="pos"></div>
						<div class="bt f24 font-m">Repeated dose toxicity studies</div>
						<div class="btxt f16">
							<table>
								<tbody>
									<tr>
										<th class="f18 font-m">Species</th>
										<th class="f18 font-m">Route</th>
										<th class="f18 font-m">Doses </th>
										<th class="f18 font-m">Duratioin </th>
										<th class="f18 font-m">Key Findings</th>
									</tr>
									<tr v-for="(item,index) in dataInfo.repeated_dose_toxicity_studies" :key="index">
										<td>{{item.species}}</td>
										<td>{{item.route}}</td>
										<td>{{item.doses}}</td>
										<td>{{item.duratioin}}</td>
										<td>{{item.key_findings}}</td>
									</tr>
									
								</tbody>
							</table>
						</div>
					</div>
					<div class="dblock">
						<div id="p3" class="pos"></div>
						<div class="bt f24 font-m">Carcinogenicity studies</div>
						<div class="btxt f16">
							<table>
								<tbody>
									<tr>
										<th class="f18 font-m">Species</th>
										<th class="f18 font-m">Route</th>
										<th class="f18 font-m">Doses </th>
										<th class="f18 font-m">Duratioin </th>
										<th class="f18 font-m">Key Findings</th>
									</tr>
									<tr v-for="(item,index) in dataInfo.carcinogenicity_studies" :key="index">
										<td>{{item.species}}</td>
										<td>{{item.route}}</td>
										<td>{{item.doses}}</td>
										<td>{{item.duratioin}}</td>
										<td>{{item.key_findings}}</td>
									</tr>
									
								</tbody>
							</table>
						</div>
					</div>
					<div class="dblock">
						<div id="p4" class="pos"></div>
						<div class="bt f24 font-m">In-vivo/In-vitro genotoxicity studies</div>
						<div class="btxt f16">
							<table>
								<tbody>
									<tr>
										<th class="f18 font-m">Test/Assay </th>
										<th class="f18 font-m">Cell lines/Organism </th>
										<th class="f18 font-m">Concentration/Dose </th>
										<th class="f18 font-m">Findings </th>
										<th class="f18 font-m">Note </th>
									</tr>
									<tr v-for="(item,index) in dataInfo.genotoxicity_studies" :key="index">
										<td>{{item.test_assay}}</td>
										<td>{{item.cell_lines_organism}}</td>
										<td>{{item.concentration_dose}}</td>
										<td>{{item.findings}}</td>
										<td>{{item.note}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="dblock">
						<div id="p5" class="pos"></div>
						<div class="bt f24 font-m">Reproductive and developmental studies</div>
						<div class="btxt f16">
							<table>
								<tbody>
									<tr>
										<th class="f18 font-m">Species</th>
										<th class="f18 font-m">Route </th>
										<th class="f18 font-m">Doses(mg/kg/day) </th>
										<th class="f18 font-m">Duratioin </th>
										<th class="f18 font-m">Key Findings </th>
									</tr>
									<tr>
										<td class="f18 font-m" colspan="5"
											style="background: #f5f5f5;text-align: center;color: #242424;padding: 10px;">
											Reproductive/continuous breeding study
										</td>
									</tr>
									
									<tr  v-for="(item,index) in dataInfo.reproductive_and_developmental_studies" :key="index">
										<template v-if="item.title=='Reproductive/continuous breeding study'">
										<td>{{item.species}}</td>
										<td>{{item.route}}</td>
										<td>{{item.doses}}</td>
										<td>{{item.duratioin}}</td>
										<td>{{item.key_findings}}</td>
										</template>
									</tr>
									
									<tr>
										<td class="f18 font-m" colspan="5"
											style="background: #f5f5f5;text-align: center;color: #242424;padding: 10px;">
											Male reproductive function study
										</td>
									</tr>
									<tr v-for="(item,index) in dataInfo.reproductive_and_developmental_studies" :key="index">
										<template v-if="item.title=='Male reproductive function study'">
										<td>{{item.species}}</td>
										<td>{{item.route}}</td>
										<td>{{item.doses}}</td>
										<td>{{item.duratioin}}</td>
										<td>{{item.key_findings}}</td>
										</template>
									</tr>
									<tr>
										<td class="f18 font-m" colspan="5"
											style="background: #f5f5f5;text-align: center;color: #242424;padding: 10px;">
											Embryotoxicity study
										</td>
									</tr>
									<tr v-for="(item,index) in dataInfo.reproductive_and_developmental_studies" :key="index">
										<template v-if="item.title=='Embryotoxicity study'">
										<td>{{item.species}}</td>
										<td>{{item.route}}</td>
										<td>{{item.doses}}</td>
										<td>{{item.duratioin}}</td>
										<td>{{item.key_findings}}</td>
										</template>
									</tr>
									<tr>
										<td class="f18 font-m" colspan="5"
											style="background: #f5f5f5;text-align: center;color: #242424;padding: 10px;">
											Embryotoxicity study (effects on maternal and fetal liver and kidney were
											investigated)
										</td>
									</tr>
									<tr v-for="(item,index) in dataInfo.reproductive_and_developmental_studies" :key="index">
										<template v-if="item.title=='Embryotoxicity study (effects on maternal and fetal liver and kidney were investigated)'">
										<td>{{item.species}}</td>
										<td>{{item.route}}</td>
										<td>{{item.doses}}</td>
										<td>{{item.duratioin}}</td>
										<td>{{item.key_findings}}</td>
										</template>
									</tr>
								</tbody>
							</table>
							<br>
							<p> <b>*Pregnancy category C:</b> There are no adequate and well controlled studies in
								pregnant women.however,epidemiological data on oral acetaminophen use in pregnant women
								show no increased risk of major congenital malformations (7).
							</p>
						</div>
					</div>
					<div class="dblock">
						<div id="p6" class="pos"></div>
						<div class="bt f24 font-m">Highly sensitizing potential </div>
						<div class="btxt f16">
							<b>Local tolerance study in rabbits-</b>There were no relevant treatment related changes at
							the injection site when acetaminophen was
							administered via the intravenous and perivenous routes.Slight increases in perivascular
							haemorrhage and perivascular acute
							inflammation were observed in animals administered acetaminophen via the intra-arterial
							route(<a href="">5</a>). <br>
							<b>Skin Sensitization Test in Guinea-Pigs-</b>Acetaminophen did not induce delayed contact
							hypersensitivity in guinea-pigs when
							administered either via the intradermal or cutaneous routes of administration( <a
								href="">5</a> ).

						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="detailBox gray">
			<div class="box flex page-inner">
				<div class="col"></div>
				<div class="cor">
					<div class="dt f36 font-m">Clinical Toxicity Data</div>
					<div class="dblock">
						<div id="p7" class="pos"></div>
						<div class="bt f24 font-m">Pharmacodynamics data</div>
						<div class="btxt f16">
							Acetaminophen increases the pain threshold by inhibiting two isoforms of
							cyclooxygenase,COX-1 and COX-2,which are involved in
							prostaglandin(PG)synthesis.Prostaglandins are responsible for eliciting pain sensations.As
							opposed to the salicylate drug class,
							acetaminophen does not disrupt tubular secretion of uric acid and does not affect acid-base
							balance if taken at the recommended doses( <a href="">3</a> )

						</div>
					</div>
					<div class="dblock">
						<div id="p8" class="pos"></div>
						<div class="bt f24 font-m">Carcinogenicity </div>
						<div class="btxt f16">
							No component of this product present at levels greater than or equal to 0.1%is identified as
							probable,possible,or confirmed human carcinogen by IARC(International Agency for Research on
							Cancer)( <a href="">6</a> )


						</div>
					</div>
					<div class="dblock">
						<div id="p9" class="pos"></div>
						<div class="bt f24 font-m">Reproductive and developmental studies </div>
						<div class="btxt f16">

							*Pregnancy category C:There are no adequate and well controlled studies in pregnant
							women.however,epidemiological data on oral
							acetaminophen use in pregnant women show no increased risk of major congenital
							malformations( <a href="">7</a> ).

						</div>
					</div>
					<div class="dblock">
						<div id="p10" class="pos"></div>
						<div class="bt f24 font-m">Highly sensitizing potential </div>
						<div class="btxt f16">
							No relevant clinical data regarding the sensitization potential was available in literature

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		toxicity
	} from '@/api/sections'

	import {
		ElMessageBox
	} from 'element-plus'
	export default {
		async setup() {
			const route = useRoute();
			const info = {
				name: 'Paracetamol (Oral)',
				IUPACName: ''
			};
			const state = useState('global_userInfo');
			return {
				info,
				state
			}
		},
		data() {
			return {
				dataInfo: {},
				otherInfo:{}
			}
		},
		methods: {
			hasPermision: function(id) {
				const that = this;
				return that.state.permission.includes(id) || false;
			}
		},
		computed: {

		},
		mounted: function() {
			var that = this;
			that.$nextTick(function() {
				toxicity({
					'apiid': that.$route.query.id,
				}).then((res) => {
					that.dataInfo = res.data
					if(res.data.toxicity_data && res.data.toxicity_data.length>0){
						that.otherInfo=res.data.toxicity_data[0]
					}
				})

				$(".toggleML").each(function() {
					var btn = $(this).find('.zk');
					var short = $(this).find('.span');
					var info = $(this).find('.hid');
					var line = $(this).find('.p');
					short.text(info.text().substr(0, 120) + '...');
					btn.click(function() {
						if ($(this).hasClass('act')) {
							$(this).removeClass('act');
							line.removeClass('act');
							short.text(info.text().substr(0, 120) + '...');
						} else {
							$(this).addClass('act');
							line.addClass('act');
							short.html(info.html());
						}
					});
				});

			})
		}
	}
</script>